$border-blue: #2abcca;
$all-gray: #d4d4df;
$all-orange: #ff915a;
$box-background: #2a507d;
$text-blue: #2beded;
$text-red: #ef4b43;
$text-yellow: #faff67;
$size-14: 14px;
$size-16: 16px;
$size-20: 20px;
@mixin wh-100 {
  width: 100%;
  height: 100%;
}

.icon {
  height: 21px;
  margin-right: 5px;
}
.system-icon {
  height: 28px;
  margin-right: 5px;
}
.text-red {
  color: $text-red;
}
.chartStyle {
  @include wh-100;
}
.no-data-box {
  @include wh-100;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff70;
  font-size: $size-14;
}
.overflow-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.d-none {
  display: none;
}
.d-opacity {
  opacity: 0;
}
:deep(.el-link.el-link--default) {
  color: #ffffff;
  font-size: 12px;
}
:deep(.el-link.el-link--default:hover) {
  color: $text-blue;
  font-size: 12px;
}
:deep(.el-pagination) {
  margin-top: 10px;
}

/*滚动条*/
::-webkit-scrollbar {
  width: 8px;
}
/*滚动条-轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgba(28, 43, 93, 0.81);
}
/*滚动条-滑块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
  background-color: rgba(14, 171, 180, 0.30);
}

.search-system-container {
  @include wh-100;
  .query-system-btn {
    color: #1c2b5d;
    background-color: #00ffff;
  }
  .domain-title {
    color: #ffffff;
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 15px;
  }
  .active-domain {
    width: 70px;
    padding: 5px;
    margin-right: 8px;
    color: #ffffff;
    background-color: #0a4d8f;
    border-radius: 5px;
  }
  .unActive-domain {
    width: 70px;
    padding: 5px;
    margin-right: 8px;
    color: #cacad1;
    background-color: #626c88;
    border-radius: 5px;
  }
  .system-health-pie-box {
    width: 474px;
    height: 200px;
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    .chart-item {
      display: inline-block;
      width: 33.3%;
      height: 97%;
    }
  }
}
.set-refresh-box {
  width: 100%;
  height: 22px;
  display: flex;
  align-items: center;
  color: #ffffff;
}
:deep(.el-switch__label) {
  color: #dcdfe6;
}

.index-container-left {
  @include wh-100;
  .left-box {
    height: 49.5%;
    padding: 2px 10px 0px;
    border: 1px solid $border-blue;
    background: $box-background;
    &:nth-child(1) {
      margin-bottom: 8px;
    }
    .business-list-header {
      height: 8%;
      padding-right: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .business-list-title {
        color: $text-blue;
        font-size: $size-16;
        display: flex;
        align-items: center;
      }
    }
    .business-list-body {
      height: 90%;
      .flip-list-box {
        @include wh-100;
        overflow: hidden;
      }
      .business-list-item {
        height: 12.5%;
        padding: 4px 0;
        display: flex;
        cursor: pointer;
        .list-index {
          width: 5%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #c75e56;
        }
        .business-list-content{
          width: 95%;
          height: 100%;
          background-color: rgba(199,94,86,0.15);
          padding-left: 4px;
          .list-content-data {
            height: 60%;
            display: flex;
            align-items: center;
            .data-text {
              color: $text-blue;
            }
          }
          .list-content-label {
            height: 40%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .business-list-content:hover {
          background-color: rgba(199,94,86,0.4);
        }
      }
    }
  }
}

.index-container-right {
  @include wh-100;
  .center-box {
    height: 78%;
    width: 100%;
    .center-box-left {
      height: 100%;
      padding: 0 10px;
      .center-head {
        height: 12%;
        background: $box-background;
        padding: 8px;
        display: flex;
        .system-overview-item {
          width: 20%;
          padding: 0 12px;
          .system-item-header {
            height: 40%;
            color: $text-blue;
            font-size: $size-14;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .system-item-content {
            height: 60%;
            padding: 0 20px;
            .item-content-data {
              display: flex;
              align-items: center;
              height: 50%;
              .item-data-label {
                width: 65%;
              }
              .system-item-data {
                width: 35%;
              }
            }
            .user-total-text {
              padding-top: 8px;
              font-size: $size-20;
              text-align: center;
            }
          }
        }
        .divider {
          display: inline-block;
          width: 1px;
          height: 74%;
          background-color: #296c8c;
          position: relative;
          top: 20%;
        }
      }
      .center-body {
        height: 88%;
        padding: 10px;
        .toggle-tab-header {
          height: 7%;
          padding: 5px;
          display: flex;
          align-items: center;
          .toggle-tab-button {
            color: #ffffff;
            font-size: $size-16;
            text-align: center;
            width: 12%;
            padding: 5px 0;
            background: none;
            border: none;
            &:hover {
              border: 1px solid $border-blue;
            }
          }
          .active-button {
            border: 1px solid $border-blue;
            background: $border-blue;
            background: -moz-linear-gradient(top, rgba(43,237,237,0.1) 0%, rgba(43,237,237,0.5) 100%);
            background: -webkit-linear-gradient(top, rgba(43,237,237,0.1) 0%, rgba(43,237,237,0.5) 100%);
            background: linear-gradient(top, rgba(43,237,237,0.1) 0%, rgba(43,237,237,0.5) 100%);
          }
        }
        .toggle-tab-content {
          height: 100%;
          width: 100%;
          .map-container {
            @include wh-100;
            .area-busi-table-container {
              width: 260px;
              height: 240px;
              position: absolute;
              bottom: 0;
              right: 0;
              background-color: #0000004d;
              border-radius: 10px;
              border: 1px solid #56698d;
              :deep(.el-table tr) {
                background-color: transparent;
                color: #ffffff;
                &:hover {
                  background-color: rgba(43, 237, 237, 0.2) !important;
                }
              }
              :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
                color: #2beded;
                height: 10%;
                background-color: transparent !important;
              }
              :deep(.el-table--small th), :deep(.el-table--small td) {
                padding: 4px 0;
              }
              :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
                background-color: transparent;
              }
              .area-business-table {
                background-color: transparent;
                padding: 0px 3px 3px;
              }
              :deep(.el-table th.el-table__cell.is-leaf) {
                border-bottom: 1px solid #999999;
              }
              :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
                border-bottom: 1px solid #999999;
              }
              :deep(.el-table__inner-wrapper) {
                &::before {
                  background-color: #999999;
                }
              }
              .turn-page-box {
                height: 10%;
                width: 100%;
                display: flex;
                justify-content: center;
                padding-top: 6px;
                .page-item {
                  color: #ffffff;
                  float: left;
                  margin: 0 10px;
                  background: #797979;
                  height: 3px;
                  cursor: pointer;
                }
                .page-item-active {
                  background: #3fd5ee;
                }
              }
            }
          }
          .business-overview-box {
            @include wh-100;
            overflow-y: auto;
            scrollbar-width: 8px;
            scrollbar-color: rgba(255, 255, 255, 0.20) rgba(28, 43, 93, 0.81);
            .business-item-box {
              height: 33%;
              padding: 8px 24px;
              .business-item {
                @include wh-100;
                padding: 5px 12px;
                border: 1px solid $all-gray;
                border-radius: 8px;
                .business-item-title {
                  height: 23%;
                  font-size: $size-14;
                  color: $all-gray;
                }
                .business-item-body {
                  height: 77%;
                  .business-item-term {
                    height: 20%;
                    display: flex;
                    align-items: center;
                    .business-item-label {
                      width: 50%;
                    }
                    .business-item-data {
                      width: 50%;
                      color: $all-gray;
                    }
                  }
                }
              }
              .normal-business-item {
                border: 1px solid $border-blue;
                .business-item-title {
                  color: $text-blue;
                }
                .business-item-data {
                  color: $text-blue;
                }
              }
              .alert-business-item {
                border: 1px solid $all-orange;
                .business-item-title {
                  color: $all-orange;
                }
                .business-item-data {
                  color: $all-orange;
                }
              }
            }
          }
        }
      }
    }
    .center-box-right {
      height: 100%;
      .banner-box {
        height: 6%;
        width: 100%;
        display: flex;
        align-items: center;
        .banner-toggle-box {
          font-size: $size-20;
          height: 100%;
          display: flex;
          justify-content: left;
          align-items: center;
          :deep(.el-select) {
            width: 90%;
            padding-left: 8px;
          }
          :deep(.el-select > .el-input) {
            display: block;
            width: 100%;
            background-color: $box-background;
          }
          :deep(.el-input__wrapper) {
            background-color: transparent;
          }
          :deep(.el-input--large) {
            border: none;
            border-radius: 0;
            background-image: url("../../assets/icons/png/ops-workbench/index/frame1.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% 100%;
          }
          :deep(.el-input__inner) {
            color: #ffffff;
            font-size: $size-20;
            text-align: center;
          }
        }
        .banner-icon-box {
          font-size: $size-16;
          height: 100%;
          :deep(.el-link--inner) {
            display: flex;
            align-items: center;
          }
          .banner-icon {
            height: 24px;
            margin-right: 5px;
          }
        }
      }
      .right-chart-box {
        height: 49%;
        padding: 8px;
        .business-top-box {
          height: 100%;
          padding-right: 8px;
          .business-top-content {
            height: 90%;
            width: 100%;
            .business-alarm-item-bg {
              height: 20%;
              background-image: url("../../assets/icons/png/ops-workbench/index/blue-bottom.png");
              background-repeat: no-repeat;
              background-position: bottom;
              background-size: 100% 50%;
              padding-bottom: 8px;
              background-origin: content-box;
              .business-alarm-item {
                @include wh-100;
                cursor: pointer;
                display: flex;
                align-items: center;
                .busi-name-text {
                  width: 65%;
                  font-size: 15px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                }
                .health-rate-text {
                  color: $text-yellow;
                  width: 42px;
                }
              }
            }
          }
        }
        .business-box {
          height: 100%;
          background: $box-background;
          border-radius: 8px;
          padding: 10px 10px 0;
          .business-title {
            font-size: $size-16;
            height: 10%;
            position: relative;
            .business-more-link {
              position: absolute;
              bottom: 45%;
              right: 1%;
            }
          }
          .health-top5-content {
            width: 100%;
            height: 90%;
            display: flex;
            .health-top5-bar {
              height: 100%;
              width: 65%;
            }
            .health-top5-label {
              width: 35%;
              height: 100%;
              padding: 6px 0;
              .health-top5-label-item {
                width: 100%;
                height: 20%;
                cursor: pointer;
                padding-top: 16%;
                .agency-blue-text {
                  display: inline-block;
                  width: 45%;
                  min-width: 49px;
                  color: $text-blue;
                  font-size: 18px;
                  font-family: Agency;
                }
                .alarm-num-text {
                  width: 55%;
                  padding-left: 5px;
                  display: inline-block;
                  color: $text-yellow;
                  font-size: $size-14;
                }
              }
            }
          }
        }
      }
      .right-list-box {
        height: 45%;
        margin: 0 8px;
        padding: 10px 10px 5px;
        background: $box-background;
        border-radius: 8px;
        .health-list-header {
          height: 8%;
          width: 100%;
          padding-right: 6px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .health-list-title {
            font-size: $size-16;
          }
          .health-list-label {
            margin-right: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .health-type-tip {
              color: $text-red;
              font-size: $size-14;
              margin-right: 24px;
            }
            .health-more {
              padding-bottom: 2px
            }
          }
        }
        .health-list-body {
          height: 90%;
          width: 100%;
          padding-top: 6px;
          padding-left: 5px;
          .flip-list-box {
            @include wh-100;
            overflow: hidden;
          }
          .health-list-item {
            height: 20%;
            border-bottom: 1px solid #556086;
            padding-top: 3px;
            cursor: pointer;
            .list-content-label {
              height: 50%;
              width: 100%;
              color: $text-blue;
              font-size: $size-14;
              display: flex;
              align-items: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .list-content-data {
              height: 50%;
              width: 100%;
            }
          }
          .health-list-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }
  }
  .footer-box {
    height: 21%;
    margin: 6px 12px 0 8px;
    background: $box-background;
    border-radius: 8px;
    .trend-toggle-row {
      height: 10%;
      width: 100%;
      text-align: right;
      color: $text-blue;
      padding-right: 16px;
      .trend-title {
        color: $text-blue;
        font-size: $size-14;
      }
      :deep(.el-select) {
        width: 88px;
        padding-left: 4px;
      }
      :deep(.el-select > .el-input) {
        display: block;
        width: 100%;
        background-color: $box-background;
      }
      :deep(.el-input--mini .el-input__inner) {
        color: #ffffff;
        font-size: 13px;
        text-align: center;
        border: 1px solid $border-blue;
        border-radius: 8px;
        background-color: transparent;
        height: 26px;
        padding-left: 10px;
      }
    }
    .trend-chart {
      height: 90%;
      width: 100%;
    }
  }
}
